<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!--  看板娘-->
  <link rel="stylesheet" href="css/girl.css" type="text/css">
  <script type="text/javascript"  src="js/L2Dwidget.0.min.js"></script>
  <script type="text/javascript"  src="js/L2Dwidget.min.js"></script>

  <title>年度总结看版</title>
  <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet"><link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css'><link rel="stylesheet" href="css/board.css">

</head>
<body>
<!-- partial:index.partial.html -->
<!-- Working version of https://dribbble.com/shots/14552329--Exploration-Task-Management-Dashboard -->
<div class='app'>
  <main class='project'>
    <div class='project-info'>
      <h1>年度总结看版</h1>
      <div class='project-participants'>
        <span></span>
        <span></span>
        <span></span>
        <span></span>

        </div>
    </div>
    <div class='project-tasks'>
      <div class='project-column'>
        <div class='project-column-heading'>
          <h2 class='project-column-heading__title'>已完成</h2><button class='project-column-heading__options'><i class="fas fa-ellipsis-h"></i></button>
        </div>
        <div class='task' draggable='true'>
          <div class='task__tags'><span class='task__tag task__tag--copyright'>综合能力</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
          <p>参加“新年新气象”网页设计活动，并认真参加</p>
          <div class='task__stats'>
            <span><time datetime="2023-1-19T20:00:00"><i class="fas fa-flag"></i>Jan 19</time></span>
            <span><i class="fas fa-comment"></i>3</span>
            <span><i class="fas fa-paperclip"></i>7</span>
            <span class='task__owner'></span>
          </div>
        </div>
        
                <div class='task' draggable='true'>
          <div class='task__tags'><span class='task__tag task__tag--design'>学习</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
          <p>绩点4+</p>
          <div class='task__stats'>
            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Dec 31</time></span>
            <span><i class="fas fa-comment"></i>2</span>
            <span><i class="fas fa-paperclip"></i>5</span>
            <span class='task__owner'></span>
          </div>
        </div>
        
                <div class='task' draggable='true'>
          <div class='task__tags'><span class='task__tag task__tag--copyright'>综合能力</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
          <p>加入大厂的高校联盟</p>
          <div class='task__stats'>
            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Jan 15</time></span>
            <span><i class="fas fa-comment"></i>2</span>
            <span><i class="fas fa-paperclip"></i>3</span>
            <span class='task__owner'></span>
          </div>
        </div>
      </div>
<!--      第二溜-->
      <div class='project-column'><div class='project-column-heading'>
          <h2 class='project-column-heading__title'>进行中</h2><button class='project-column-heading__options'><i class="fas fa-ellipsis-h"></i></button>
        </div>
          
        <div class='task' draggable='true'>
          <div class='task__tags'><span class='task__tag task__tag--design'>学习</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
          <p>雅思6.5</p>
          <div class='task__stats'>
            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>2023</time></span>
            <span><i class="fas fa-comment"></i>5</span>
            <span><i class="fas fa-paperclip"></i>5</span>
            <span class='task__owner'></span>
          </div>
        </div>

        <div class='task' draggable='true'>
          <div class='task__tags'><span class='task__tag task__tag--illustration'>生活与健康</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
          <p>学习滑板</p>
          <div class='task__stats'>
            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Mar 25</time></span>
            <span><i class="fas fa-comment"></i>8</span>
            <span><i class="fas fa-paperclip"></i>7</span>
            <span class='task__owner'></span>
          </div>
        </div>

        <div class='task' draggable='true'>
          <div class='task__tags'><span class='task__tag task__tag--copyright'>综合能力</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
          <p>参加数学建模美赛</p>
          <div class='task__stats'>
            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Feb 17</time></span>
            <span><i class="fas fa-comment"></i>12</span>
            <span><i class="fas fa-paperclip"></i>11</span>
            <span class='task__owner'></span>
          </div>
        </div>

        <div class='task' draggable='true'>
          <div class='task__tags'><span class='task__tag task__tag--illustration'>生活与健康</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
          <p>练习乒乓球</p>
          <div class='task__stats'>
            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
            <span><i class="fas fa-comment"></i>4</span>
            <span><i class="fas fa-paperclip"></i>8</span>
            <span class='task__owner'></span>
          </div>
        </div>

        </div>

<!--      未完成-->
      <div class='project-column'><div class='project-column-heading'>
          <h2 class='project-column-heading__title'>未完成</h2><button class='project-column-heading__options'><i class="fas fa-ellipsis-h"></i></button>
        </div>

        <div class='task' draggable='true'>
          <div class='task__tags'><span class='task__tag task__tag--copyright'>综合能力</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
          <p>参加排球比赛获得名次</p>
          <div class='task__stats'>
            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Oct 24</time></span>
            <span><i class="fas fa-comment"></i>4</span>
            <span><i class="fas fa-paperclip"></i>0</span>
            <span class='task__owner'></span>
          </div>
        </div>
        <div class='task' draggable='true'>
          <div class='task__tags'><span class='task__tag task__tag--design'>学习</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
          <p>雅思6.5+</p>
          <div class='task__stats'>
            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Sep 24</time></span>
            <span><i class="fas fa-comment"></i>0</span>
            <span><i class="fas fa-paperclip"></i>5</span>
            <span class='task__owner'></span>
          </div>
        </div>
        <div class='task' draggable='true'>
          <div class='task__tags'><span class='task__tag task__tag--illustration'>生活与健康</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
          <p>和朋友自驾游一次</p>
          <div class='task__stats'>
            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
            <span><i class="fas fa-comment"></i>2</span>
            <span><i class="fas fa-paperclip"></i>2</span>
            <span class='task__owner'></span>
          </div>
        </div>
        </div>

<!--      计划中-->
      <div class='project-column'><div class='project-column-heading'>
          <h2 class='project-column-heading__title'>计划中</h2><button class='project-column-heading__options'><i class="fas fa-ellipsis-h"></i></button>
        </div>

         <div class='task' draggable='true'>
          <div class='task__tags'><span class='task__tag task__tag--illustration'>生活与健康</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
          <p>和朋友去旅行</p>
          <div class='task__stats'>
            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>2023</time></span>
            <span><i class="fas fa-comment"></i>12</span>
            <span><i class="fas fa-paperclip"></i>5</span>
            <span class='task__owner'></span>
          </div>
        </div>

         <div class='task' draggable='true'>
          <div class='task__tags'><span class='task__tag task__tag--illustration'>生活与健康</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
          <p>在路边弹吉他</p>
          <div class='task__stats'>
            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>2023</time></span>
            <span><i class="fas fa-comment"></i>3</span>
            <span><i class="fas fa-paperclip"></i>7</span>
            <span class='task__owner'></span>
          </div>
        </div>

         <div class='task' draggable='true'>
          <div class='task__tags'><span class='task__tag task__tag--copyright'>综合能力</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
          <p>参加秋招</p>
          <div class='task__stats'>
            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>2023</time></span>
            <span><i class="fas fa-comment"></i>8</span>
            <span><i class="fas fa-paperclip"></i>16</span>
            <span class='task__owner'></span>
          </div>
        </div>

        </div>

    </div>
  </main>
  <aside class='task-details'>
    <div class='tag-progress'>
      <h2>KPI</h2>
      <div class='tag-progress'>
        <p>综合能力 <span>5/10</span></p>
        <progress class="progress progress--copyright" max="10" value="5"> 5 </progress>
      </div>
      <div class='tag-progress'>
        <p>生活与健康 <span>5/10</span></p>
        <progress class="progress progress--illustration" max="10" value="5"> 5 </progress>
      </div>
      <div class='tag-progress'>
        <p>学习 <span>3/10</span></p>
        <progress class="progress progress--design" max="10" value="3"> 3 </progress>
      </div>
    </div>
    <div class='task-activity'>
      <h2>动态</h2>
      <ul>
        <li>
          <span class='task-icon task-icon--attachment'><i class="fas fa-paperclip"></i></span>
          <b>附件 </b>上传一张图片到“练习乒乓球“
          <time datetime="2021-11-24T20:00:00">Jan 17</time>
        </li>
          <li>
              <span class='task-icon task-icon--comment'><i class="fas fa-comment"></i></span>
          <b>留言 </b>留言”戒骄戒躁“到”绩点4+“
          <time datetime="2021-11-24T20:00:00">Jan 16</time>
        </li>
         <li>
             <span class='task-icon task-icon--edit'><i class="fas fa-pencil-alt"></i></span>
          <b>记录 </b>”打卡半个小时“到”练习乒乓球“
          <time datetime="2021-11-24T20:00:00">Jan 8</time>
        </li>
          <li>
              <span class='task-icon task-icon--attachment'><i class="fas fa-paperclip"></i></span>
          <b>附件 </b>上传一张照片到”和朋友自驾游一次“
          <time datetime="2021-11-24T20:00:00">Jan 2</time>
        </li>
         <li>
             <span class='task-icon task-icon--comment'><i class="fas fa-comment"></i></span>
          <b>留言 </b> 留言“老娘最美”到“在路边弹吉他”
          <time datetime="2021-11-24T20:00:00">Dec 30</time>
        </li>
      </ul>
    </div>
  </aside>
</div>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/js/all.min.js'></script>
<script  src="js/board.js">

</script>
<script>
  // 看板娘
  L2Dwidget.init({"display": {
      "superSample": 2,
      "width": 200,
      "height": 400,
      "position": "right",
      "hOffset": 0,
      "vOffset": 0
    }
  });
</script>

</body>
</html>
